<template>
    <view class="content">
        <view class="bg"></view>
        
        <view class="box" >
            <view class="title">订单信息</view>
            <view class="item2">
                <view class="grey">订单编号</view>
                <view class="item-right">{{detail.out_trade_no}}</view>
            </view>
            <view class="item2">
                <view class="grey">运输线路</view>
                <view class="item-right">{{detail.line}}</view>
            </view>
            <view class="item2">
                <view class="grey">始发地</view>
                <view class="item-right">{{detail.origin}}</view>
            </view>
            <view class="item2">
                <view class="grey">目的地</view>
                <view class="item-right">{{detail.destination}}</view>
            </view>
            <view class="item2">
                <view class="grey">装车地点</view>
                <view class="item-right">{{detail.loading_site}}</view>
            </view>
            <view class="item2">
                <view class="grey">预计装货时间</view>
                <view class="item-right">{{detail.loading_time}}</view>
            </view>
            <view class="item2">
                <view class="grey">车厢位置</view>
                <view class="item-right">{{detail.carriage}}</view>
            </view>
        </view>
        
        <view class="box" v-for="(item, index) in detail.goods" :key="index">
            <view class="item">
                <view class="grey">货物类型</view>
                <view class="item-right">{{item.type}}</view>
            </view>
            <view class="item">
                <view class="grey">产品名称</view>
                <view class="item-right">{{item.goods}}</view>
            </view>
            <view class="item" v-if="item.brand">
                <view class="grey">品牌</view>
                <view class="item-right">{{item.brand}}</view>
            </view>
            <view class="item" v-if="item.packages">
                <view class="grey">包装</view>
                <view class="item-right">{{item.packages}}</view>
            </view>
            <view class="item" v-if="item.model">
                <view class="grey">型号</view>
                <view class="item-right">{{item.model}}</view>
            </view>
            <view class="item">
                <view class="grey">件数</view>
                <view class="item-right">{{item.num}}件</view>
            </view>
            
            <!-- 零担 有 重量  体积 -->
            
            <!-- <view class="item" v-if="detail.order_type==1">
                <view class="grey">预估重量</view>
                <view class="item-right">
                    <input type="text" v-model="item.weight" placeholder="请输入" class="inp">
                    <text class="u-p-l-15">件</text>
                </view>
            </view> -->
            
            
             
            
            <view class="item">
                <view class="grey">实际件数</view>
                <view class="item-right">
                    <input type="text" v-model="item.send_num" @input="jianshu(item)" placeholder="请输入" class="inp">
                    <text class="u-p-l-15">件</text>
                </view>
                
                
            </view>
            
            <view class="item" v-if="detail.order_type==1">
                <view class="grey">实际体积</view>
                
                <view class="item-right">
                    <input type="text" v-model="item.send_volume" @input="jianshu(item)" placeholder="请输入" class="inp">
                    <text class="u-p-l-15" style="font-size: 32rpx;">m³</text>
                </view>
                
            </view>
            <view class="item" v-if="detail.order_type==1">
                <view class="grey">实际重量</view>
                <view class="item-right">
                    <input type="text" v-model="item.send_weight" @input="jianshu(item)" placeholder="请输入" class="inp">
                    <text class="u-p-l-15">斤</text>
                </view>
            </view>
            
            
           <!-- 包车没有运费 -->
            
			<!-- 运费自动计算 -->
           <view class="item" v-if="detail.order_type==1">
                <view class="grey">运费</view>
                <view class="item-right"><text class="u-font-34">{{item.estimate_freight}}</text>元</view>
            </view>
            
            <view class="item">
                
                
                <view class="grey">产品状态</view>
                <view class="item-right" @click="show = true,detailStatus = item">
                    <view v-if="item.goods_status&&item.goods_status.label">{{item.goods_status.label}}</view>
                    <view style="color: #979797;" v-else>点击选择状态</view>
                    
                    
                    <u-icon name="arrow-right" color="#979797" size="28" class="u-m-l-15"></u-icon>
                </view>
            </view>
            
            <view class="u-p-b-30" v-if="item.goods_status.value==2">
                <textarea maxlength="200" v-model="item.goods_reason" :auto-height="true" placeholder="请输入取消原因" class="t-inp"></textarea>
            </view>
        </view>
        
        <view class="box u-p-30">
            <view class="grey">发货照片</view>
            <!-- <image src="../../static/image/up.png" class="up-icon"></image> -->
            
            <view class="up-icon" style="position: relative;" @click="chooseImage">
                <image  class="up-icon" v-if="!inageData.image_id" src="../../static/image/up.png" mode="widthFix"></image>
                <image class="up-icon" v-else :src="inageData.image" mode="widthFix"></image>
                <view v-if="inageData.image_id" @click.stop="previewImage()"
                    style="position: absolute;bottom: 0;width: 180rpx;right: 0;text-align: center;background:rgba(0, 0, 0, 0.4);color: #fff;">
                    查看</view>
            
            </view>
            
        </view>
        
        <view class="box u-p-30" v-if="detail.order_type==2">
            总运费 
            <text class="price">
                ￥<text class="price-num">{{detail.order_amount}}</text>
            </text>
        </view>
        
        <view class="box u-p-30" v-if="detail.order_type==1">
            总运费 
            <text class="price">
                
                <!-- freight -->
                ￥<text class="price-num">{{detail.order_amount}}</text>
            </text>
        </view>
        
        
        
        
        <view class="btns">
            <view class="btn-l" style="width: 100%;text-align: center;" @click="complete">装车完成打印二维码</view>
            <!-- <view class="btn-r">装车完毕</view> -->
        </view>
        
        <u-popup v-model="showImage" mode="center" width ="80%">
            <!-- <view><image style="width: 80%;" mode="widthFix" :src="code.qrcode_img"></image></view> -->
            <view class="u-padding-40">
                <image style="width: 100%;display:block;margin: auto;" mode="widthFix" :src="code.qrcode_img"></image>
                <view class="btn-r" @click="showImage = false,$backT()" style="color: #fff;margin-top: 40rpx;text-align: center;">装车完毕</view>
            </view>
        </u-popup>
        <u-select v-model="show" :list="statusList" @confirm="selectConfirm"></u-select>
        
    </view>
</template>

<script>
    export default {
        data() {
            return {
               id:'',
               detail:'',
               show:false,
               showImage:false,
               
               goods_status:'1',// 1正常 2取消
               
               statusList:[{
                    value: 1,
                   	label: '正常'
               },{
                    value: 2,
                   	label: '取消'
               }],
               
               detailStatus:'',
               inageData: {},
               car_id:'',
               code:'',
               
            };
        },
        onLoad(option) {
            if(option.id){
                this.id = option.id
                this.car_id = option.car_id
            }
            this.loading_vehicle_detail()
        },
        methods: {
            jianshu(citem){
                // <view v-if="item.freight_type ==1">预估运费 <text class="price-num">{{item.freight_price*item.num || '自动计算'}}</text>元</view>
                // <view v-if="item.freight_type ==2">预估运费 <text class="price-num">{{item.freight_price*item.num*item.weight || '自动计算'}}</text>元</view>
                // <view v-if="item.freight_type == 3">预估运费 <text class="price-num">{{item.freight_price*item.num*item.send_volume || '自动计算'}}</text>元</view>
                // 计价类型freight_type= 1件 2重量 3体积
                    if(this.detail.order_type==1){
                        
                         if(citem.freight_type ==3){
                             citem.estimate_freight = citem.send_num* citem.send_volume* citem.freight
                         }else if(citem.freight_type ==2){
							 // 发货端装车时，通过重量计算的运费，不要再×数量，这个是以发货员输入的实际总重量*单价来计算的
                             // citem.estimate_freight = citem.send_num* citem.send_weight* citem.freight
							 citem.estimate_freight = citem.send_weight* citem.freight
							 
                         }else if(citem.freight_type ==1){
                             citem.estimate_freight = citem.send_num* citem.freight
                         }
                        
                        let allPrice = 0
                        this.detail.goods.forEach(item=>{
                            let price = 0
                            if(item.freight_type ==3){
                                if(item.send_volume&&item.send_num){
                                    // this.detail.order_amount = 0
                                    price = price +(Number(item.send_volume) * Number(item.send_num) * Number(item.freight)) 
                                }
                                
                                
                                
                            }else if(item.freight_type ==2){
                                if(item.send_weight&&item.send_num){
                                    // this.detail.order_amount = 0
                                    if(item.send_weight){
                                        price = price +(Number(item.send_weight) * Number(item.send_num) * Number(item.freight))
                                    }else{
                                        price = 0
                                    }
                                }
                            }else if(item.freight_type ==1){
                                if(item.send_weight&&item.send_num){
                                    // this.detail.order_amount = 0
                                    price = price + (Number(item.send_num) * Number(item.freight)) 
                                }
                            }
                            allPrice = allPrice+price
                            
                        })
                        this.detail.order_amount = allPrice
                    }
             
                console.log(this.detail)
                
                // this.detail.freight
                
            },
            previewImage() {
                let url = []
            
                url[0] = this.inageData.image
                uni.previewImage({
                    urls: url,
                    longPressActions: {
                        success: function(data) {},
                        fail: function(err) {
                            console.log(err.errMsg);
                        }
                        
                    }
                });
            },
            chooseImage() {
                let _this = this
                uni.chooseImage({
                    count: 1, //默认9
                    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album','camera'], //从相册选择
                    success: function(res) {
                        _this.$upLoadPic(res.tempFilePaths[0]).then(data => {
                            _this.inageData = data.detail;
                            // item.default_value.push(data.data);
                        });
            
                    }
                });
            
            },
            selectConfirm(e){
                this.detailStatus.goods_status = e[0];
                
                console.log(this.detailStatus.goods_status)
            },
            //获取车辆列表
            loading_vehicle_detail(){
                
                
                this.$ajax('loading_vehicle_detail', {
                    user_token:this.$getTokens(),
                    order_id:this.id,
                }).then(ret => {
                	if (ret.success == 1000) {
                        if(ret.detail){
                            
                            
                            ret.detail.goods.forEach(item=>{
                                this.$set(item,'send_volume','')
                                this.$set(item,'send_weight','')
                                this.$set(item,'goods_status','')
                                this.$set(item,'goods_reason','')
                                this.$set(item,'send_volume','')
                                
                                
                                
                                
                            })
                            
                            this.detail = ret.detail;
                            
                            
                        }else{
                            this.$toast(ret.detail.msg);
                        }
                        
                	} else {
                		this.$toast(ret.detail.msg);
                	}
                    
                });
            },
            complete() {
                
                let Arry = [];
                let flg = false
               
                this.detail.goods.forEach(item=>{
                    Arry.push({
                        id:item.id,
                        goods_status:item.goods_status.value,
                        goods_reason:item.goods_reason,
                        send_num:item.send_num,
                        send_weight:item.send_weight,
                        send_volume:item.send_volume,
                        
                    })
                    
                    if(!item.send_num){
                        this.$toast('请输入实际件数')
                        flg = true;
                        return
                    }else if(!item.goods_status){
                        this.$toast('请选择商品状态')
                        flg = true
                        return
                    }
                    
                })
                if(this.inageData&&!this.inageData.image_id){
                   this.$toast('请上传发货照片')
                   return
                  
                }
                if(flg){
                    return
                }
                this.$ajax('loading_vehicle_finish', {
                    
                    user_token:this.$getTokens(),
                    
                    order_id:this.detail.order_id,
                    
                    car_id:this.car_id,
                    send_id:this.inageData.image_id,
                    
                    data:Arry,
                    
                    
                }).then(ret => {
                    
                	if (ret.success == 1000) {
                        if(ret.detail){
                            
                            // this.sousuoLanya();
                            this.code = ret.detail;
                            this.showImage = true
                        }else{
                            this.$toast(ret.detail.msg);
                        }
                        
                	} else {
                		this.$toast(ret.detail.msg);
                	}
                    
                });
            },
        }
    };
</script>

<style lang="scss">
    
    page{
        background-color: #f2f4fa;
    }
    .content {
    	padding: 30rpx 20rpx;
    }
    .bg {
    	width: 100%;
    	height: 600rpx;
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: -1;
        background: linear-gradient(to bottom, #cfe4fc,#e1ecfb, #f2f4fa);
    }
    .box{
        padding: 10rpx 30rpx;
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 16rpx;
    }
    .title{
        font-size: 34rpx;
        font-weight: bold;
        padding: 18rpx 0;
    }
    .item{
        padding: 30rpx 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .item2{
        padding: 18rpx 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .grey{
        color: #656565;
    }
    .item-right{
        flex: 1;
        text-align: right;
        font-weight: bold;
        word-break: break-all;
        white-space: pre-line;
        padding-left: 30rpx;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .inp{
        flex: 1;
        text-align: right;
        font-size: 28rpx;
    }
    .t-inp{
        background-color: #f5f6fa;
        width: 100%;
        min-height: 180rpx;
        height: auto;
        padding: 20rpx;
        border-radius: 10rpx;
    }
    .up-icon{
        width: 187rpx;
        // height: 187rpx;
        margin-top: 20rpx;
    }
    .price{
        color: #ff3f00;
        padding-left: 15rpx;
    }
    .price-num{
        font-size: 38rpx;
        font-weight: bold;
    }
    
    .btns{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 30rpx;
        color: #fff;
        font-size: 34rpx;
    }
    .btn-l{
        padding: 25rpx 60rpx;
        background-color: #00457f;
        border-radius: 15rpx;
    }
    .btn-r{
        padding: 25rpx 60rpx;
        background-color: #ff5f2b;
        border-radius: 15rpx;
    }
    
    

</style>
